ReadyState এবং Status এর মাধ্যমে Response Management

readyState এবং status হলো XMLHttpRequest অবজেক্টের দুটি গুরুত্বপূর্ণ প্রপার্টি, যা Ajax রিকোয়েস্টের অবস্থান এবং সার্ভারের রেসপন্স চেক করতে ব্যবহৃত হয়। এগুলোর মাধ্যমে আমরা জানতে পারি যে রিকোয়েস্টটি সম্পূর্ণ হয়েছে কিনা এবং সফল হয়েছে কিনা। এই প্রপার্টিগুলোর মাধ্যমে রেসপন্স ম্যানেজমেন্ট করা হয়। নিচে readyState এবং status এর বিস্তারিত ব্যাখ্যা এবং কিভাবে এগুলো ব্যবহার করে রেসপন্স ম্যানেজ করা হয়, তা নিয়ে আলোচনা করা হলো।

১. readyState:

readyState প্রপার্টি রিকোয়েস্টের বর্তমান অবস্থান নির্দেশ করে। এটি XMLHttpRequest এর একটি বিল্ট-ইন প্রপার্টি, যার ভ্যালু ০ থেকে ৪ পর্যন্ত হতে পারে। প্রতিটি ভ্যালু একটি নির্দিষ্ট অবস্থার নির্দেশ করে।

readyState এর ভ্যালুগুলো:

• ব্যবহার: আমরা সাধারণত readyState === 4 চেক করি, যা নির্দেশ করে রিকোয়েস্ট সম্পূর্ণ হয়েছে।

২. status:

status প্রপার্টি HTTP স্ট্যাটাস কোড নির্দেশ করে, যা সার্ভার থেকে রেসপন্স হিসেবে আসে। এটি XMLHttpRequest এর একটি প্রপার্টি, যা রিকোয়েস্টের সফলতা বা ব্যর্থতা যাচাই করতে ব্যবহৃত হয়।

সাধারণ HTTP Status Codes:

• ব্যবহার: আমরা সাধারণত status === 200 চেক করি, যা নির্দেশ করে রিকোয়েস্ট সফল হয়েছে।

readyState এবং status এর মাধ্যমে Response Management

readyState এবং status একসাথে ব্যবহার করে আমরা রিকোয়েস্টের সফলতা বা ব্যর্থতা চেক করতে পারি এবং তার উপর ভিত্তি করে উপযুক্ত এক্সেকিউশন করতে পারি।

উদাহরণ:

function fetchData() {
    var xhr = new XMLHttpRequest(); // XMLHttpRequest অবজেক্ট তৈরি করা
    xhr.open("GET", "https://jsonplaceholder.typicode.com/posts/1", true); // রিকোয়েস্ট ওপেন করা
    
    // রেসপন্স ম্যানেজমেন্টের জন্য onreadystatechange ইভেন্ট হ্যান্ডলার সেট করা
    xhr.onreadystatechange = function() {
        if (xhr.readyState === 4) { // রিকোয়েস্ট সম্পূর্ণ হয়েছে কিনা তা চেক করা
            if (xhr.status === 200) { // রিকোয়েস্ট সফল হয়েছে কিনা তা চেক করা
                var data = JSON.parse(xhr.responseText); // JSON ডেটা প্রসেস করা
                document.getElementById("data-container").innerHTML = `
                    <h2>${data.title}</h2>
                    <p>${data.body}</p>
                `;
            } else {
                // যদি রিকোয়েস্ট ব্যর্থ হয়, তাহলে এরর মেসেজ দেখানো
                document.getElementById("data-container").innerHTML = "Error fetching data. Status code: " + xhr.status;
            }
        }
    };
    
    xhr.send(); // রিকোয়েস্ট পাঠানো
}

ব্যাখ্যা:

1. readyState চেক করা:
   • xhr.onreadystatechange ইভেন্ট হ্যান্ডলার ব্যবহার করে চেক করা হয়েছে যে xhr.readyState === 4 কিনা। এটি নির্দেশ করে যে রিকোয়েস্ট সম্পূর্ণ হয়েছে এবং সার্ভার থেকে পুরো রেসপন্স পাওয়া গেছে।
2. status চেক করা:
   • যদি xhr.readyState === 4 হয়, তাহলে xhr.status === 200 চেক করা হয়েছে, যা নির্দেশ করে যে রিকোয়েস্ট সফল এবং সার্ভার থেকে সঠিক রেসপন্স এসেছে।
   • যদি status === 200 না হয়, তাহলে একটি এরর মেসেজ দেখানো হয়েছে এবং স্ট্যাটাস কোড প্রদর্শন করা হয়েছে।

readyState এবং status এর মাধ্যমে Response Handling এর ধাপ:

1. readyState === 4 চেক করা:
   • রিকোয়েস্ট সম্পূর্ণ হলে নিশ্চিত হওয়া যায় যে সার্ভার থেকে পুরো রেসপন্স পাওয়া গেছে।
2. status === 200 চেক করা:
   • সফল রিকোয়েস্ট হলে ডেটা প্রসেস করা হয় এবং HTML DOM আপডেট করা হয়।
3. এরর ম্যানেজমেন্ট:
   • যদি status !== 200 হয়, তাহলে একটি এরর মেসেজ প্রদর্শন করা হয় যা ইউজারকে জানায় যে রিকোয়েস্ট ব্যর্থ হয়েছে।

সারসংক্ষেপ:

• readyState: রিকোয়েস্টের অবস্থা নির্দেশ করে (0 থেকে 4 পর্যন্ত)। আমরা সাধারণত readyState === 4 চেক করি।
• status: সার্ভারের রেসপন্সের সফলতা নির্দেশ করে (HTTP স্ট্যাটাস কোড, যেমন 200)। আমরা সাধারণত status === 200 চেক করি।

readyState এবং status একসাথে ব্যবহার করে Ajax রিকোয়েস্টের রেসপন্স ম্যানেজ করা হয়, যা ওয়েব অ্যাপ্লিকেশনকে ডায়নামিক এবং ইন্টারেক্টিভ করতে সাহায্য করে।